<style scoped>
.wraper {
    padding: 0 30px;
    margin-bottom:30px;
}

.search {
    padding-bottom: 20px;
}

.search span {
    color: #68777c;
    font-weight: bold;
    padding-right: 18px;
}

.search button {
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}

.top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}


.wraper .headline {
    position: relative;
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
}

.wraper .add-agent {
    position: absolute;
    top: 0px;
    right: 30px;
    background-color: #348bf2;
    color: #fff;
}

.iconfont {
    font-size: 14px;
}

.red-font {
    color: #ff1f1f;
}




.fixed-bottom{
    padding-left: 20px;
    padding-right: 20px;
    height: 80px;
    line-height: normal !important;
    position: fixed;
    left: 210px;
    right: 0;
    bottom: 0;
    z-index: 999;
    text-align: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.sidehide{
    left: 75px;
}


/* 表格样式 start*/

.pro-card {
    margin-bottom: 10px;
}

.pro-card-head {
    background-color: #e6e7eb;
    line-height: 38px;
    border: 1px solid #ddd;
}

.pro-card-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding-left: 20px;
}

.pro-card-headr {
    padding-right: 10px;
    text-align: right;
}

.pro-card-content {
    clear: both;
}

.pro-paramname {
    text-align: center;
    background-color: #e6e7eb;
    font-size: 14px;
    color: #333;
    border-right: 1px solid #ddd;
}

.pro-paramvalue {
    padding-left: 10px;
    border-right: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

.pro-card-contentrow {
    line-height: 40px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}






/* 表格样式  end */


/* 分页 start */

.page {
    margin:  0;
}

.ivu-page {
    padding-bottom: 150px;
}







/* 分页 end */
</style>
<style>
.a-link{
    color: #4074e1;
    text-decoration: underline;
    cursor: pointer;
}
.ivu-table-row-highlight .a-link{
    color:#fff;
}
</style>



<template>
    <div class="policy-manage">
        <product-title></product-title>
        <div class="wraper">        
            <div class="pro-con-f common-box-body">
                <Row>
                    <h3 class="search-h3 huang" >
                        快速搜索
                    </h3>
                        <Form  :model="searchForm" class="search-form">
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <Form-item>
                                    <Input size="large" type="text"  v-model="searchForm.name" placeholder="请输入您要搜索的标题名称" />
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="6">
                                <FormItem>
                                <Select v-model="searchForm.author" filterable  transfer  placeholder="请选择作者">  
                                    <i-option value=" ">不限</i-option>
                                    <template v-for="item in authorList">
                                        <i-option :value="item" :key="item">{{item}}</i-option>
                                    </template>
                                </Select>
                            </FormItem>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="5">
                                <Form-item>
                                    <Select v-model="searchForm.status" filterable transfer   placeholder="请选择发布状态">  
                                        <i-option value=" ">不限</i-option>
                                        <i-option value="2">发布</i-option>
                                        <i-option value="1">未发布</i-option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="5">
                                <Form-item>
                                    <DatePicker type="date" transfer placeholder="请选择日期" @on-change="datachange($event,searchForm,'create_timed')"></DatePicker>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="24" :md="24" :lg="2" >
                                <Form-item  style="padding-right:0px;">
                                    <Button size="large"  class="fr" type="primary" icon="ios-search" @click="search">搜索</Button>
                                </Form-item>
                            </Col>
                            <div class="clear"></div>
                        </Form>
                        <Col span="24" class="table-action" >
                            <Button type="warning" v-if="$isShow('classroom/create')" size="large" class="fr" icon="plus"  @click="add">新增</Button>
                        </Col>
                </Row>
            </div>
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme highlight_table">
                        <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns1" :data="tableList" class=""></Table>
                    </div>                        
                </div>
            </div>
        </div>
        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
            <Row class="pro-pagesize">
                <Col :md="24" :lg="16">
                    <Button type="error" v-if="$isShow('classroom/del')" :disabled="tableaction" @click="del" size="large" class="fl mr10 ">删除</Button>
                    <Button type="info" v-if="$isShow('classroom/get_detail')" :disabled="tableaction" @click="update" size="large" class="fl mr10">编辑</Button>
                    <!-- <Button type="warning" :disabled="tableaction"  size="large" class="fl mr10" v-if="currentRow.status==2" @click="unpublish">取消发布</Button>
                    <Button type="success" :disabled="tableaction"  size="large" class="fl mr10" v-else @click="publish">发布</Button> -->
                    <Button v-if="$isShow('classroom/publish')" :type="currentRow.status==2 ? 'info' : 'info'" :disabled="tableaction"  size="large" class="fl mr10"  @click="publishClick">{{currentRow.status==2 ? '取消发布' : '发布'}}</Button>
                </Col> 
                <Col :md="24" :lg="8" class="tRight">
                    <Page ref="pages" :current="currentpage" :total="listTotal" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { get_list,del,publish,get_author} from '../../api/classroom'


export default {
    data() {
        return {
            page: 1,
            pagesize: 10,
            listTotal:0,
            searchForm: {
                p: 1,
                pagesize: 10,
                cid: '',
                oid: '',
                status: '',
                insure_date: '',
                insure_datetime: '',
                appName: '',
            },
            tableloading:true,
            tableaction:true,  
            current:0,
            currentpage:1,
            currentRow:{},
            columns1:[
                {
                    title: '序号',
                    type:'index',
                    align: 'center',
                    width:60
                },
                {
                    title: '标题',
                    key: 'name',
                    align:'center',
                    width:'30%',
                },
                {
                    title: '作者',
                    key: 'author',
                    align:'center' ,
                },
                {
                    title: '关键字',
                    key: 'keyword',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',(function(){
                            let str="";
                            params.row.keyword.map((item,index)=>{
                                if(index==(params.row.keyword.length-1)){
                                    str+=item;
                                }else{
                                    str+=item+'，';
                                }
                            })
                            return str;
                        })())
                    }
                },
                {
                    title: '课件分类',
                    key: 'cate_first',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',params.row.cate_first?params.row.cate_first:"无")
                    }
                },
                {
                    title: '小分类',
                    key: 'cate_second',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',params.row.cate_second?params.row.cate_second:"无")
                    }
                },
                {
                    title: '阅读量',
                    key: 'view',
                    align:'center',
                },
                 {
                    title: '日期',
                    key: 'create_timed',
                    align:'center',
                    // render:(h,params)=>{
                    //     return h('div', (function(){
                    //         return new Date(params.row.create_timed.sec*1000).toLocaleDateString()
                    //     })())
                    // }
                },
                 {
                    title: '状态',
                    key: 'status',
                    align:'center',
                    render:(h,params)=>{
                        return h('div', {attrs:{
                               class: params.row.status== '2' ?'success-color':'nopass-color'
                            }},
                            params.row.status==2?'发布':params.row.status==1?'未发布':'')
                    }
                },
            ],
            tableList:[],
            authorList:[],
        }
    },
    components: {
        productTitle
    },
    computed: {
        slidetoggle(){
            return this.$store.state.sildeshow
        },
    },
    mounted () {
        this.getList();
        this.get_author();
    },
    methods: {
        //时间转换
        datachange(date,obj,param){
            obj[param] = date
        },
        tableCurrentChange(currentRow,oldCurrentRow){
            this.tableaction = false;
            this.currentRow = currentRow
        },
        // 搜索
        search() {
            this.getList();
        },
        //获取作者列表
        
        get_author() {  
            new Promise((resolve, reject) => {
               get_author().then(response => {
                    if (response.data.err == 0) {
                        this.authorList = response.data.data;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        // 获取员工列表
        getList() {  
            this.tableloading = true  
            this.tableaction = true        
            new Promise((resolve, reject) => {
                get_list(this.searchForm).then(response => {
                    if (response.data.err == 0) {
                        this.tableList = response.data.data.list;
                        this.listTotal = response.data.data.total;
                        this.tableloading = false
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        // 页码改变
        pageChange(page) {
            this.page = page
            this.searchForm.p = page
            this.getList()
        },
        // 每页条数改变
        pageSizeChange(pagesize) {
            this.pagesize = pagesize
            this.searchForm.pagesize = pagesize
            this.getList();
        },
        add(){
            this.$router.push({name: 'class_list_create'});
        },
        update(){
            this.$router.push({name:'class_list_update',params:{id:this.currentRow.id}}); 
        },
        del() {
            let params = {
                    id: this.currentRow.id
                }
                this.$Modal.confirm({
                    title: '删除',
                    content: '请确认删除该项数据！！！',
                    onOk:()=> {
                        new Promise((resolve, reject) => {
                            del(params).then(response => {
                                if (response.data.err == 0) {
                                    // this.getList();
                                    this.$Message.success(response.data.info);
                                    location.reload();
                                      
                                } else {
                                    this.$Message.error(response.data.info);
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });
                    }
            });
            
        },

        //发布取消发布
        publishClick(){
            let params={
                id:this.currentRow.id
            }
            new Promise((resolve, reject) => {
                publish(params).then(response => {
                    if (response.data.err == 0) {
                        this.getList();
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        // unpublish(){
        //     let params={
        //         id:this.currentRow.id
        //     }
        //     new Promise((resolve, reject) => {
        //         unpublish(params).then(response => {
        //             if (response.data.err == 0) {
        //                 this.getList();
        //             } else {
        //                 this.$Message.error(response.data.info);
        //             }
        //             resolve();
        //         }).catch(error => {
        //             reject(error);
        //         });
        //     });
        // }
        
       
    }
}
</script>
